<div class="box-shadow pos-rlt">
  <div class="p-h-md p-v bg-white box-shadow pos-rlt">
    <h3 class="no-margin have-btn-title">广告管理&nbsp;-&nbsp;新建广告</h3>
  </div>
  <!-- 导航开始 -->
  <div class="ad-top-nav-container" style="display: block;">
    <!-- 主导航开始 -->
    <div class="ad-top-nav">
      <ul>
        <li class="active">
          <div class="item-bg">
            <h2>1</h2>
            <div class="top-nav-title">
              <h3>推广目标设置</h3>
              <span>选择推广目标</span>
            </div>
          </div>
        </li>
        <li>
          <div class="item-bg">
            <h2>2</h2>
            <div class="top-nav-title">
              <h3>广告计划设置</h3>
              <p>计划类型、广告类型</p>
            </div>
          </div>
        </li>
        <li>
          <div class="item-bg">
            <h2>3</h2>
            <div class="top-nav-title">
              <h3>投放设置</h3>
              <p>投放时间、人群定向</p>
            </div>
          </div>
        </li>
        <li>
          <div class="item-bg">
            <h2>4</h2>
            <div class="top-nav-title">
              <h3>创意设置</h3>
              <p>广告素材和落地页</p>
            </div>
          </div>
        </li>
        <li>
          <div class="item-bg">
            <h2>5</h2>
            <div class="top-nav-title">
              <h3>预览并提交</h3>
              <p>信息确认和广告预览</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 主导航结束 -->

    <!-- 子导航开始 -->
    <div class="ad-top-nav-main">
      <form id="adGroupForm" class="ad-top-nav-main">
        <!--<input type="hidden" id="frontAdGroupId" name="frontAdGroupId" value="${form.frontAdGroup.id}">-->
        <ul>
          <!-- 子导航1 -->
          <li class="top-nav-main1 top-nav-item" data-id="1">
            <div>
              <ul>
                <p class="ad-top-nav-main-title">请选择您推广的目的：</p>
                <li class="ad-next-btn one" id="1">
                  <i class="nav-main-li-icon"></i>
                  推广产品挖掘潜在客户
                  <b class="jt-icon"></b>
                </li>
                <li class="no-click" id="2">
                  <i class="nav-main-li-icon"></i>
                  提高品牌知名度
                </li>
                <li class="no-click" id="3">
                  <i class="nav-main-li-icon"></i>
                  提高企业竞争力
                </li>
                <li class="no-click" id="4">
                  <i class="nav-main-li-icon"></i>
                  增加网址访问量
                </li>
              </ul>
            </div>
            <input type="hidden" id="promote" name="promotionGoal">
          </li>
          <!-- 子导航1结束 -->

          <!-- 子导航2 -->
          <li class="top-nav-main2 top-nav-item col-sm-6 hide" data-id="2">
            <div class="form-group">
              <label class="col-sm-4 control-label style-label">计划类型：</label>
              <div class="col-sm-4">
                <div class="radio-inline">
                  <input type="radio" id="advertMobileJh" name="frontCampaignType" value="2" checked="checked" >
                  <label for="advertMobileJh">移动端广告计划</label>
                </div>
                <div class="radio-inline">
                  <input type="radio" id="advertPcJh" name="frontCampaignType" value="1" >
                  <label for="advertPcJh">PC端广告计划</label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-4 control-label style-label">广告类型：</label>
              <div class="col-sm-4">
                <div class="radio-inline">
                  <input type="radio" checked="true" id="img-txt-advert">
                  <label for="img-txt-advert">图文广告</label>
                </div>
                <div class="radio-inline">
                  <input type="radio" id="video-advert" disabled>
                  <label for="video-advert">视频广告</label>
                </div>
              </div>
            </div>


            <!--<input type="hidden" id="pcMinAdOffer" value="${form.pcMinAdOffer}">
            <input type="hidden" id="mobileMinAdOffer" value="${form.mobileMinAdOffer}">-->


            <div class="form-group">
              <label class="col-sm-4 control-label style-label">广告名称：</label>
              <div class="col-sm-8 ad-name">
                <input name="title" id="title" type="text" class="form-control" required>
              </div>
              <p class="top-main2-hint">广告名称仅用于对广告的管理，不对用户展示</p>

            </div>

            <div class="text-center">
              <a href="javascript:;">
                <lable class="btn btn-primary ad-prev-btn">上一步</lable>
              </a>
              <label class="btn btn-primary ad-next-btn">下一步</label>
            </div>
          </li>
          <!-- 子导航2结束 -->

          <!-- 子导航3 -->
          <li class="top-nav-main3 top-nav-item col-sm-9 hide" data-id="3">
            <div>
              <div class="form-group">
                <label class="col-sm-3 control-label tf-date-label">投放方式：</label>
                <div class="col-sm-4" style="text-align:left;">
                  <div class="radio-inline">
                    <input type="radio" name="adPutType" id="adPutTypeStartTime" value="1" checked="checked">
                    <label for="adPutTypeStartTime">从开始一直投放</label>
                  </div>
                  <div class="radio-inline">
                    <input type="radio" name="adPutType" id="adPutTypeChooseTime" value="2">
                    <label for="adPutTypeChooseTime">选择起止时间</label>
                  </div>
                </div>
                <div id="timeSelect" style="display:none ">
                  <div class="form-group">
                    <label class="col-sm-1 control-label"></label>
                    <div class="col-sm-4 timepick timepick-date">投放开始时间
                      <input name="adPutStartAt" type="text" size="10"
                             class="form-control ng-pristine ng-valid  Wdate" placeholder="选择日期"
                             id="start"
                             onClick="WdatePicker({skin:'twoer',minDate:'%y-%M-%d',maxDate: '#F{$dp.$D(\'end\',{d:0})}' })"
                             style="">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-1 control-label"></label>
                    <div class="col-sm-4 timepick">投放结束时间
                      <input name="adPutEndAt" type="text" size="10"
                             class="form-control ng-pristine ng-valid Wdate" placeholder="选择日期" id="end"
                             onClick="WdatePicker({skin:'twoer',minDate: '#F{$dp.$D(\'start\',{d:0})||(\'%y-%M-{%d}\');}' })">
                    </div>
                  </div>
                </div>
              </div>

             <!-- <div class="tf-menu col-sm-12" id="target">

              </div>-->
              <!--<div class="add-btn-main">
                <a class="btn btn-sm btn-primary add-tf-person" id="addTarget">添加投放人群</a>
              </div>-->

            </div>
            <div class="text-center">
              <a href="javascript:;">
                <lable class="btn btn-primary ad-prev-btn">上一步</lable>
              </a>
              <label class="btn btn-primary ad-next-btn">下一步</label>
            </div>
          </li>
          <!-- 子导航3结束 -->

          <!-- 子导航4 -->
          <li class="top-nav-main4 top-nav-item col-sm-9 hide" data-id="4">
            <div>
              <div class="add-ad-cy">
                <div class="form-group">
                  <label class="col-sm-3 control-label">广告创意：</label>
                  <div class="col-sm-9 add-ad-cy-main">
                    <lable id="creativesButton" class="btn btn-sm btn-default" data-template="dialog" data-placement="top"
                           data-animation="am-slide-top aside-open-backdrop" data-container="body"
                           bs-aside="aside">从创意库中选择...
                    </lable>
                    <!-- 存储创意Id -->
                    <div id="creativesInputs" style="display: none;">

                    </div>

                    <button id="newCreativesButton"  type="button" class="btn btn-primary"  data-placement="top"
                            data-animation="am-slide-top aside-open-backdrop"  data-container="body" bs-aside="aside">
                      <i class="glyphicon glyphicon-plus"></i>
                      新建创意
                    </button>
                  </div>
                </div>
              </div>

              <div class="cy-show col-sm-12 cy-creative tops">

              </div>

              <!--<div class="form-group ad-choose-landingPage">
                <label class="col-sm-2 control-label">落地页：</label>
                <div class="col-sm-10 ad-choose-landingPage-main">
                  &lt;!&ndash;<select id="diyFormId" name="diyFormId" class="form-control">
                    <c:forEach items="${form.landingPages }" var="landingPage">
                      <option value="${landingPage.id }"> ${landingPage.name }</option>
                    </c:forEach>
                  </select>&ndash;&gt;
                  <a href="javascript:;" class="btn btn-primary" id="addLaningPage">新建落地页</a>
                  <a href="javascript:;" class="btn btn-primary" id="landingPageUpdate">更新</a>
                </div>
              </div>-->
              <div class="form-group ad-choose-landingPage" style="margin-top: 40px;">
                <label class="col-sm-2 control-label ">广告出价(元/CPC)：</label>
                <div class="col-sm-4 ad-choose-landingPage-main" style="margin-right: 18px;">
                  <input name="adOffer" id="adOffer" type="text" class="form-control" required style="width:102%;">
                </div>

              </div>

              <div class="text-center">
                <a href="javascript:;">
                  <lable class="btn btn-primary ad-prev-btn">上一步</lable>
                </a>
                <label class="btn btn-primary ad-next-btn" >下一步</label>
              </div>
            </div>
          </li>
          <!-- 子导航4结束 -->

          <!-- 子导航5 -->
          <li class="top-nav-main5 top-nav-item col-sm-12 hide" data-id="5">
            <div>
              <div class="ad-yl">
                <p class="ad-yl-title">广告预览</p>
                <div class="cy-show col-sm-12 cy-creative">

                </div>
              </div>


              <div class="ad-yl-desc col-sm-12 show-result">
                <ul>
                  <li id="type1"></li>
                  <li id="type2"></li>
                  <li id="type3"></li>
                  <li id="type4"><label>广告类型</label>图文广告</li>
                  <li id="type5"></li>
                  <li id="type6"></li>
                  <li id="type7"></li>
                </ul>
              </div>


              <div class="text-center">
                <a href="javascript:;">
                  <lable class="btn btn-primary ad-prev-btn">上一步</lable>
                </a>
                <button class="btn btn-default" id="formSubmit">提交广告</button>
              </div>
            </div>
          </li>
          <!-- 子导航5结束 -->
        </ul>
      </form>
    </div>
    <!-- 子导航结束 -->
  </div>
  <!-- 导航结束 -->

</div>

<script type="text/template" id="subtype-template">
  {{ _.each(types,function(e,i){ }}
  <option value="{{= e.id }}">
    {{= e.name }}
  </option>
  {{ }) }}
</script>

<!--一添加提示弹窗开始-->
<div id="addModal" class="modal fade" id="onekeyReduction">
</div>
<!-- /.modal -->

<!-- 选择广告创意弹窗 -->
<div id="creatives" class="aside top fade" tabindex="-1" role="dialog" style="display: none; ">
  <div class="aside ng-scope top am-slide-top aside-open-backdrop" tabindex="-1" role="dialog" style="display: block; ">
    <div class="aside-dialog">
      <div class="aside-content">
        <div class="aside-header" ng-show="title">
          <button type="button" class="close close-creative">×</button>
          <h4 class="aside-title">选择广告创意</h4>
        </div>
        <div id="creativesList">
          <div class="emp">暂无数据,请先选择广告计划</div>
        </div>

        <div class="aside-footer">
          <button id="addCreatives" type="button" class="btn btn-primary submit-creative">提 交</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 新建广告创意弹窗 -->
<div id="newCreatives" class="modal aside  top  fade" tabindex="-1" role="dialog" >

</div>
<%= javascript_include_tag 'ad_groups', 'data-turbolinks-track': 'reload' %>
